<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>使用jsonp获取腾讯天气信息</title>
	<link rel="stylesheet" href="CSS/bootstrap/dist/css/bootstrap.css">

	<style type="text/css">
		.container {
			padding-top: 60px;
		}
	</style>
</head>
<body>
	<h2 align="center">获取安徽滁州近48小时天气信息</h2>
	<div class="container">
		<table class="table table-striped table-hover" align="center" id="box"></table>
	</div>

	<script src="js/jsonp.js"></script>
	<script src="js/template-web.js"></script>

	<script type="text/html" id="tpl">
		<tr>
			<th>时间</th>
			<th>温度</th>
			<th>天气</th>
			<th>风向</th>
			<th>风力</th>
		</tr>
		{{each info}}
		<tr>
			<!--value.update_time 时间  对其进行格式化输出-->
			<td>{{dateFormat($value.update_time)}}</td>
			<td>{{$value.degree}}</td>
			<td>{{$value.weather}}</td>
			<td>{{$value.wind_direction}}</td>
			<td>{{$value.wind_power}}</td>
		</tr>
		{{/each}}
	</script>

	<script>
		// 获取table标签
		var box = document.getElementById('box');

		function dateFormat(date) {
			var year = date.substr(0, 4);
			var month = date.substr(4, 2);
			var day = date.substr(6, 2);
			var hour = date.substr(8, 2);
			var minute = date.substr(10, 2);
			var seconds = date.substr(12, 2);

			return year + '年' + month + '月' + day + '日' + hour + '时' + minute + '分' + seconds + '秒';
		}

		// 模板如何使用模板外部的变量,函数★★★★★
		template.defaults.imports.dateFormat = dateFormat;

		// 向服务器端获取天气信息(属于jsonp请求非同源数据)
		jsonp({
			//域名 协议,端口号
			url: 'https://wis.qq.com/weather/common',
			data: {
				//source：pc电脑版本的xw时手机版本的
				source: 'pc',
				weather_type: 'forecast_1h',
				// weather_type: 'forecast_1h|forecast_24h',
				province: '安徽省',
				city: '滁州市'
			},
			success: function (data) {
				var html = template('tpl', {info: data.data.forecast_1h});
				box.innerHTML = html;
			}

		})
	</script>
</body>
</html>